<template>
  <div class="rights">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <el-table :data="rightlist" style="width: 100%" border stripe size="large">
        <el-table-column prop="num" label="#" width="50" />
        <el-table-column prop="name" label="权限名称" />
        <el-table-column prop="address" label="路径" />
        <el-table-column prop="level" label="权限等级">
          <template #default="scope">
            <el-tag
              :type="levelfilter[scope.row.level].type"
              disable-transitions
            >{{ levelfilter[scope.row.level].text }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount } from "vue";
import { getRights } from "../tools/ajax.js";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { levelfilter } from "../tools/filiter.js";
const route = useRoute();
const router = useRouter();
const rightlist = reactive([]);
onBeforeMount(() => {
  getRights({
    type: "list"
  }).then(res => {
    console.log(res.data);
    res.data.forEach((item, index) => {
      rightlist.push({
        num: index + 1,
        name: item.authName,
        address: item.path,
        level: item.level
      });
    });
  });
});
</script>

<style>

</style>